<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="40%"
    align-center
    color="white"
    @close="handleClose()"
    style="background-color: #053a6d6e; border: 5px solid #a1bf39"
  >
    <h1 style="color: white">待评价</h1>
    <el-table
      :data="order"
      style="width: 100%; background-image: url(../../assets/1.jpg)"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        style="background-color: black"
        label="订单号"
        prop="orderFormId"
      />

      <!-- <el-table-column label="订单数量" prop="totalNum" /> -->
      <!-- <el-table-column label="订单总价格" prop="totalMoney" /> -->
      <el-table-column
        style="background: transparent"
        label="购买时间"
        prop="orderDate"
      />
      <el-table-column label="订单状态" prop="state" />
      <el-table-column label="订单书籍id" prop="bookId" />
      <el-table-column label="购买数量" prop="totalNum" />
      <el-table-column>
        <template #default="scope"  >

          <el-button
        size="small"
        @click="comment(scope.row)"
        style="background-color: rgba(11, 95, 136, 0.751); color: white"
        >评价</el-button
      >
        </template>
      
      </el-table-column>
    </el-table>
  </el-dialog>
  <personal-comment ref="pc" @changestate="loadorders()"></personal-comment>
</template>
    <script>
import PersonalComment from './PersonalComment.vue';
export default {
  name: "UnCommentList",
components:{ PersonalComment },
  data() {

      return {
      centerDialogVisible: false,
      oldaddress: "",
      userId: "",
      newaddress: "",
      order: [],
    };
  },
  created: function () {
    this.userName = sessionStorage.getItem("userName");
    console.log(this.userName);
    this.userId = sessionStorage.getItem("userId");
    console.log(this.userId);
  },

  methods: {
    loadorders() {
      var data = new FormData();
      data.append("userid", sessionStorage.getItem("userId"));
      this.$axios.post("/getuncomments", data).then((resp) => {
        this.order = resp.data;
      });
    },
    tableRowClassName({ row, rowIndex }) {
      return "row";
    },
    comment(row){
      this.$refs.pc.bookId=row.bookId
      this.$refs.pc.orderFormId=row.orderFormId
      this.$refs.pc.centerDialogVisible=true
      console.log(row.bookId);
    },
    handleClose(){
      this.$emit('close')
    }
  },

  mounted: function () {
    this.loadorders();
  },
};
</script>
   
  
  
  <style>
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
.el-table .row ,.el-table th {
  background: transparent !important;
  /* color:white */
}
</style>
   
    

